<head>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <style type="text/css" >
        table {
            border : 1px solid black ;
        }
        td {
            width : 50px ;
            border : 1px solid black ;
            text-align : center ;
        }
        tspan {
            font-size: 14px;
        }
        button {
            font-size: 20px;
        }
    </style>

    <script type="text/javascript" src="jquery1.7.min.js"></script>
    <script type="text/javascript" src="raphael-min.js"></script>
    <script type="text/javascript" src="dracula_graffle.js"></script>
    <script type="text/javascript" src="dracula_graph.js"></script>
    <script type="text/javascript" src="dracula_algorithms.js"></script>

    <script>

        $(function() {

            var g = new Graph();
 
/* add a simple node */
g.addNode("strawberry");
g.addNode("cherry");
 
/* add a node with a customized label */
g.addNode("id34", { label : "Tomato" });
 
/* Advanced node example: Add a node with a customized shape
   (the Raphael graph drawing implementation can draw this shape, please
   consult the RaphaelJS reference for details http://raphaeljs.com/)
   Note: Here's the place for even more tweaking! */
 
/* First: Write a custom node render function. */
var render = function(r, n) {
        /* the Raphael set is obligatory, containing all you want to display */
        var set = r.set().push(
            /* custom objects go here */
            r.rect(n.point[0]-30, n.point[1]-13, 62, 86)
                .attr({"fill": "#fa8", "stroke-width": 2, r : "9px"}))
                .push(r.text(n.point[0], n.point[1] + 30, n.label)
                    .attr({"font-size":"20px"}));
        /* custom tooltip attached to the set */
        set.items.forEach(
            function(el) {
                el.tooltip(r.set().push(r.rect(0, 0, 30, 30)
                    .attr({"fill": "#fec", "stroke-width": 1, r : "9px"})))});
        return set;
    };
 
g.addNode("id35", {
    label : "meat\nand\ngreed" ,
    /* filling the shape with a color makes it easier to be dragged */
    render : render
});
 
/* connect nodes with edges */
g.addEdge("strawberry", "cherry");
g.addEdge("cherry", "apple");
 
/* a directed connection, using an arrow */
g.addEdge("id34", "cherry", { directed : true } );
 
/* customize the colors of that edge */
g.addEdge("id35", "apple", { stroke : "#bfa" , fill : "#56f", label : "Label" });
 
/* add an unknown node implicitly by adding an edge */
g.addEdge("strawberry", "apple");
 
/* layout the graph using the Spring layout implementation */
var layouter = new Graph.Layout.Spring(g);
layouter.layout();
 
/* draw the graph using the RaphaelJS draw implementation */
var renderer = new Graph.Renderer.Raphael('canvas', g, 1000, 1000);
renderer.draw();


        });


    </script>

</head>

<div id="canvas"></div>
<button id="redraw" onclick="redraw();">redraw</button>
<button id="dfs" onclick="dfs();">dfs</button>
<button id="bfs" onclick="bfs();">bfs</button>
<button id="flow" onclick="flow();">flow</button>
<button id='play'>play</button>
<button id='onestep'>one step</button>
<span id='i' style='display : none' ></span>